<template>
  <div id="app">
    <!-- <vue-particles
		      color="#8bd1d1"
		      :particleOpacity="0.5"
		      :particlesNumber="15"
		      shapeType="star"
		      :particleSize="5"
		      linesColor="#FFFFFF"
		      :linesWidth="2"
		      :lineLinked="true"
		      :lineOpacity="0.4"
		      :linesDistance="150"
		      :moveSpeed="3"
		      :hoverEffect="true"
		      hoverMode="grab"
		      :clickEffect="true"
		      clickMode="push"
		      class="cash"
		    >
    </vue-particles>-->
    <br />
    <br />
    <h1 style="text-align: center">安全中心</h1>
    <div class="steps">
      <el-steps :active="active" finish-status="success" v-model="active">
        <el-step title="输入账号" description="请输入您要找会的账号"></el-step>
        <el-step title="验证方式" description="请选择找回账号的验证方式"></el-step>
        <el-step title="填写新密码" description="请设置您的新密码"></el-step>
        <el-step title="完成" description></el-step>
      </el-steps>
    </div>

    <div class="tabs">
      <div class="showTabs">
        <div class="tb">
          <span id style="position: relative; top: 50px; left: 15%">
            登录账号：
            <input placeholder="请输入您要找回密码的账号" v-model="accountVal" @blur="accountCheck" />
            <div class="msg">{{msg}}</div>
          </span>
          <el-button
            type="success"
            @click="back"
            style="position: relative; top: 150px; right: 140px"
			disabled
          >上一步
		  </el-button>
          <el-button
            type="success"
            @click="next"
            style="position: relative; top: 110px; left: 280px"
            :disabled="this.nextflag"
          >下一步</el-button>
         
        </div>
        <div class="tb">
          <div id style="margin-top: 50px; margin-left: 100px">
            手机号：
            <input placeholder="请输入账号的手机号" id="phone" v-model="phoneVal" @blur="phoneCheck"/>
            <div class="msg">{{msg}}</div>
            <br />
            <br />验证码：
            <input placeholder="验证码" style="width: 110px" @blur="checkMsg" />

            <button
              id="sendBtn"
              type="button"
              style="width: 70px; height: 30px; margin-left: 10px; position:relative;top:7px;"
              :v-model="nums"
              @click="send"
              :disabled=senddis

            >{{ nums }}</button>
          </div>

          <el-button
            type="success"
            @click="back"
            style="position: relative; top: 30px; left: 180px"
          >上一步</el-button>
          <el-button
            type="success"
            style="position: relative; top: 30px; left: 180px"
            @click="next"
            :disabled=this.nextflag2
          >下一步</el-button>
          <!-- <el-button
            type="success"
            style="position: relative; top: 100px; left: 180px"
            @click="phoneCheck"
            >测试</el-button
          >-->
        </div>
        <div class="tb">
          <div id style="margin-top: 50px; margin-left: 15%">
            &nbsp;&nbsp;新密码：
            <input placeholder="请输入新密码" v-model="pwd" />
            <br />
            <br />确认密码：
            <input placeholder="请输入新密码" v-model="repwd" />
            <span>
              <img
                :src="repwdsrc"
                style="
                  width: 20px;
                  height: 20px;
                  align-items: center;
                  line-height: 20px;
                "
                :class="`${rePwdClass}`"
              />
            </span>
            <br />
            <br />

            <el-button
              type="success"
              style="position: relative; top: 20px; left: 110px"
              @click="back"
            >上一步</el-button>
            <el-button
              type="success"
              style="position: relative; top: 20px; left: 110px"
              @click="next"
              :disabled=this.nextflag3
            >下一步</el-button>
            <el-button
              type="success"
              style="position: relative; left: 150px; top: -50px"
              @click="Modify"
            >确定</el-button>
          </div>
        </div>
        <div class="tb">
          <div id style="position: relative; top: 40%; left: 20%">
            恭喜您修改密码成功,
            <a @click="toHome">点击跳转到登录页面</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import {
  accountCheck,
  phoneChecked,
  modify,
  useAccount,
  getMsg,
  CheckMsg
} from "@/network/login-register.js";
export default {
  data() {
    return {
      active: 1, //上面步骤条
      activeName: "1", //项目tbas
      num: 0,
      src: "yes.png",
      repwdsrc: "",
      rePwdClass: "hidden",
      repwd: "",
      pwd: "",
      account: "",
      email: "",
      phone: "",
      yesSrc: require("@/assets/image/login-register/image/yes.png"),
      errSrc: require("@/assets/image/login-register/image/err.png"),
      scroll: 0,
      msg: "",
      accountVal: "",
      phoneVal: "",
      id: 2,
      nextflag:true,
      nextflag2:true,
      nextflag3:true,
      nums: "发送",
      dis:false,
      senddis:false,
      t : 10
    };
  },
  methods: {
    next() {
      this.scroll = this.scroll + 500;
      $(".tabs").scrollLeft(this.scroll);
      this.active += 1;
    },
    back() {
      this.scroll = this.scroll - 500;
      $(".tabs").scrollLeft(this.scroll);
      if (this.active == 1) {
        return;
      }
      this.active -= 1;
    },

    accountCheck() {
      accountCheck(this.accountVal).then(result => {
        console.log(result);
        if (result.code == 20000) {
          this.msg = "查询成功！";
		  this.$message({
		    showClose: true,
		    message: '查询成功！',
		    type: 'success',
		    center:true
		  });
          this.nextflag=false
        }
        if (result.code == 20001) {
          this.nextflag=true;
          this.msg = "用户名不存在！";
		  this.$message({
		    showClose: true,
		    message: '用户名不存在，请重新输入',
		    type: 'error',
		    center:true
		  });
        }
      });
      useAccount(this.accountVal).then(result => {
        console.log(result);
      });
    },
    phoneCheck() {
      phoneChecked(this.phoneVal).then(result => {
        console.log(result);
        if (result.code == 20000) {

          this.msg = "查询成功！";
		  this.$message({
		    showClose: true,
		    message: '查询成功！',
		    type: 'success',
		    center:true
		  });
		  
        }
        if (result.code == 20001) {

          this.msg = "绑定的手机号不正确，请重新输入";
		  this.$message({
		    showClose: true,
		    message: '绑定的手机号不正确，请重新输入',
		    type: 'error',
		    center:true
		  });
        }
      });
    },
    checkMsg() {
      CheckMsg(this.phoneVal).then(res => {
        console.log(res);
        if (res.code == 20000) {
          this.nextflag2 = false;
          //alert("收到验证码");
        }
        if (res.code == 20001) {
          this.nextflag2= true;
          //alert("没有收到验证码");
		  this.$message({
		    showClose: true,
		    message: '发送验证码失败，请重试！！',
		    type: 'error',
		    center:true
		  });
        }
      });
    },
    Modify() {
      console.log(this.accountVal);
      console.log(this.pwd);
      modify(this.accountVal, this.pwd).then(res => {
        if (res.code == 20000) {
          this.nextflag3=false;
          //alert("修改成功！");
		  this.$message({
		    showClose: true,
		    message: '恭喜你，修改成功！',
		    type: 'success',
		    center:true
		  });
        }
        console.log(res);
      });
    },
    toHome() {
      this.$router.push("/login/home");
    },
    send() {
      this.senddis = true;
      getMsg(this.id, this.phoneVal).then(res => {
        console.log(res);
      });
      this.timer = setInterval(() => {
        this.t -= 1;
        this.nums = this.t + "s";
        if (this.t <= 0) {
          this.nums = "重新发送";
          clearInterval(this.timer);
          this.senddis = false;
          this.t = 10;
          return;
        }
      }, 1000);
    }
  },
  watch: {
    repwd() {
      var pwd = this.pwd;
      var repwd = this.repwd;
      if (pwd == repwd) {
        this.rePwdClass = "visiable";
        this.repwdsrc = this.yesSrc;
        this.active += 1;
      } else {
        this.rePwdClass = "visiable";
        this.repwdsrc = this.errSrc;
      }
    },
    pwd() {
      this.pwd = this.pwd;
    },
    email() {
      this.email = this.email;
    },
    phone() {
      this.phone = this.phone;
    },
    accout() {
      this.account = this.account;
    },
    active() {
      this.active = this.active;
    },
    accountVal() {
      this.accountVal = this.accountVal;
    },
    phoneVal() {
      this.phoneVal = this.phoneVal;
    },
    msg() {
      this.msg = this.msg;
    },
    nextflag() {
      this.nextflag = this.nextflag;
    },
    senddis(){
      this.senddis=this.senddis;
    }
  },
  mounted() {},
  destroyed() {},
  accountCheck() {}
};
</script>

<style scoped>
#app {
  width: 100vw;
  /* height:calc(100vh - 66px); */
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
  z-index: 999;
 /* background: url("https://img1.baidu.com/it/u=3321540165,2319404849&fm=26&fmt=auto&gp=0.jpg") */
  background: url(../../assets/image/home/bbc.jpg) no-repeat center center;
    
  background-size: cover;
  background-attachment: fixed;
  /* position:fixed; */
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tabs {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  background-color: transparent;
  overflow: hidden;
  scrollbar-width: none;
}
.showTabs {
  height: 100%;
  width: 2000px;
  background-color: transparent;
  overflow-x: scroll;
  display: flex;
  scrollbar-width: none;
}
.tb {
  height: 100%;
  width: 500px;
  float: left;
}
.tb input {
  width: 50%;
}

.steps {
  width: 80%;
  height: 40px;
  margin: 100px auto;
  font-size: 22px;
}
input {
  height: 30px;
  border-radius: 5px;
}
.spp {
  margin-left: 25%;
}
.hidden {
  display: none;
}
.el-tabs {
  width: 80%;
  height: 150px;
  margin: 30px auto;
  background-color: #ffffff;
}
.cash {
  position: fixed;
  top: 30;
  width: 100%;
}
.msg {
  width: 150px;
  height: 30px;
  position: absolute;
  top: -50px;
  left: 150px;
}
h1 {
  top: 30px;
}
.tb a {
  text-decoration: underline;
}
.tb a:hover {
  cursor: pointer;
}
#sendBtn {
  text-align: center;
  font-style: normal;
  text-decoration: none;
  vertical-align: text-bottom;
  zoom: 1;
  outline: none;
  font-size-adjust: none;
  font-stretch: normal;
  border-radius: 50px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  color: #fefee9;
  border: 0.2px solid #2299ff;
  background-repeat: repeat;
  background-size: auto;
  background-origin: padding-box;
  background-clip: padding-box;
  background-color: #3399ff;
  background: linear-gradient(to bottom, #eeeff9 0%, #3399ff 100%);
}
</style>
